<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ page_title }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .movie-container {
            margin-top: 20px;
        }
        .movie-header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .movie-header {
            font-size: 24px;
            font-weight: bold;
        }
        .movie-list {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 20px;
        }
        .movie-item {
            flex: 0 0 auto;
            width: 200px;
            text-align: center;
        }
        .movie-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 5px;
        }
        .movie-title {
            font-weight: bold;
            margin: 10px 0 5px 0;
        }
        .movie-detail {
            font-size: 14px;
            color: #555;
        }
        .movie-description {
            margin-bottom: 20px;
        }
        .page-button {
            padding: 6px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .page-button:hover {
            background-color: #45a049;
        }
        .page-info {
            margin: 0 15px;
            font-size: 14px;
            color: #666;
        }
        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }
    </style>
</head>
<body>
    <div class="movie-container">
        <div class="movie-header-container">
            <div class="movie-header">{{ page_title }}</div>
            <div class="header-right">
                <span class="page-info">
                    第 {{ page|add:1 }} 组/共 {{ total_movies }} 部
                </span>
                <button class="page-button" onclick="nextPage()">下一页</button>
            </div>
        </div>
        
        <div class="movie-description">当前最受欢迎的热门电影，精彩不容错过！</div>
        
        <div class="movie-list">
            {% for movie in movies %}
            <div class="movie-item">
                <img src="{{ movie.image.url }}" alt="{{ movie.title }}" class="movie-image">
                <div class="movie-title">{{ movie.title }}</div>
                <div class="movie-detail">{{ movie.detail }}</div>
            </div>
            {% endfor %}
        </div>
    </div>

    <script>
        function nextPage() {
            const currentPage = {{ page }};
            const url = new URL(window.location.href);
            url.searchParams.set('page', currentPage + 1);
            window.location.href = url.toString();
        }
    </script>
</body>
</html>
